<template>
    <NuxtLayout name="header" />
    <div class="MyPageLayout">
      <div class="layout_magin">
        <a-layout>
          <div>
            <a-layout-sider style="background-color: #FFF;" width="260" class="sider_layout_main">
              <div class="sider_layout_All_One">
                MY PAGE
                <div v-for="item in 5" class="sider_layout_list">
                  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35"
                      fill="none">
                      <circle cx="17.5" cy="17.5" r="17" fill="#D9D9D9" stroke="#777777" />
                  </svg>

                  <div style="margin-left: 13px;">구독현황</div>
              </div>
              </div>
            </a-layout-sider>
            <a-layout-sider style="background-color: #FFF;height: 170px;flex:0 !important;" width="260" class="sider_layout_main">
              <div class="sider_layout_All">
                <div class="sider_layout_All_text">FROFILE</div>
                <div style="display: flex; flex-direction: row;align-items: center;">
                  <img id="myImage" />
                  <div class="sider_layout_All_Column">
                    <text
                      style="color: #000;font-size: 18px;font-weight: 500;line-height: normal;margin-bottom: 6px;">JamesSullivan Reece</text>
                    <text
                      style="color: #000;font-size: 14px;font-weight: 500;line-height: normal;">james@inca.co.kr</text>
                  </div>
                </div>
              </div>
            </a-layout-sider>
            <div style="background-color: #FFF;" class="sider_layout_main">
              <div
                style="padding: 16px 99px; color: #777;text-align: center;font-family: Pretendard;font-size: 15px;font-style: normal;font-weight: 500;line-height: normal;">
                로그아웃
              </div>
            </div>
          </div>
          <a-layout>
            <a-layout style="padding: 0 24px 0px">
              <a-layout-content class="layout_right">
                <a-breadcrumb separator=">">
                  <a-breadcrumb-item href="">
                    <home-outlined />
                  </a-breadcrumb-item>
                  <a-breadcrumb-item href="">마이페이지</a-breadcrumb-item>
                  <a-breadcrumb-item>구독현황</a-breadcrumb-item>
                  <a-breadcrumb-item>상담내역</a-breadcrumb-item>
                </a-breadcrumb>
                <h3 >상담내역</h3>
                <div class="gay"></div>

                <div class="question">
                  <div class="questions">궁금한 사항이 생기셨나요? 문의 전 [자주하는질문]을 확인해주세요!
                    원하는 문의내역을 더욱 쉽고 빠르게 해결할 수 있습니다 </div>
                    <div class="button">
                      <text class="but">자주하는질문 이동 →</text>
                    </div>
                </div>

                <div class="bulletin">
                  
                </div>
              </a-layout-content>
            </a-layout>
          </a-layout>
        </a-layout>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { ref } from "vue";

  import { useRouter } from "vue-router";
  import { HomeOutlined } from "@ant-design/icons-vue";
  import { useRoute } from "vue-router";
  
  const selectedKeys = ref([]);
  const openKeys = ref([]);
  
  const items = ref([
    {
      key: "1",
      label: "구독현황",
      title: "구독현황",
      path: "/myPage/DingYue", // 添加路由路径
    },
    {
      key: "2",
      label: "구독내역",
      title: "구독내역",
      path: "/myPage/SubscriptionHistory", // 添加路由路径
    },
    {
      key: "3",
      label: "상담내역",
      title: "상담내역",
      path: "/myPage/ConsultationHistory", // 添加路由路径
    },
    {
      key: "4",
      label: "결제관리",
      title: "결제관리",
      path: "/myPage/PaymentManagement", // 添加路由路径
    },
    {
      key: "5",
      label: "알림관리",
      title: "알림관리",
      path: "/myPage/NotificationManagement", // 添加路由路径
    },
    {
      key: "6",
      label: "계정관리",
      title: "계정관리",
      path: "/myPage/AccountManagement", // 添加路由路径
    },
  ]);
  
  const router = useRouter();
  const route = useRoute();
 

  </script>

<style lang="scss">
body {
    background-color: #f5f5f5;
    /* 设置背景色 */
}

#myImage {
    width: 45px;
    height: 50px;
}

.MyPageLayout {
    width: 1200px;
    margin: 0 auto;

}

.layoutCss {
    padding: 32px 30px 0px 32px;
}

.siderStyle_Left {
    display: flex;
    flex-direction: column;
    text-align: start;
    padding: 14.7px 0px 0px 18px;
}

.icon_siderStyle_Left {
    margin: 31.54px 0px 0px 11px;
}

.layout_magin {
    margin: 32px 30px 0px 30px;

}



.sider_layout_main {

    border-radius: 15px;
    border: 1px solid #F0F0F0;
    margin-bottom: 24px;
}

.sider_layout_All_One {
    padding: 14.7px 0px 31px 18px;
}

.sider_layout_All {
    padding: 17px 0px 0px 16px;
}

.sider_layout_All_text {
    color: #000;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 15px;
}

.sider_layout_All_Column {
    display: flex;
    flex-direction: column;
    margin-left: 11.86px;

}

.sider_layout_list {
    display: flex;
    flex-direction: row;
    padding: 31px 100px 0px 29px;
    align-items: center;
}

.icon_sider_layout {
    width: 35px;
    height: 35px;
    border-radius: 35px;
    background-color: #D9D9D9;

}

.layout_right {
    background-color: #fff;
    padding: 36px 34px;
    margin: 0;
    border-radius: 15px;
    border: 1px solid #F0F0F0;
}
.gay{
  margin-top: 20px;
  border: 1px solid #D9D9D9;
}
.question{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.questions{
  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  inline-size: 450px;
}
.button{
  width: 199px;
  height: 60px;
  border-radius: 5px;
  background: #FF7400;
  text-align: center;

}
.but{
  color: #FFF;
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 700;
  line-height: 60px;
}
</style>